<template>
  <section>
    <p
    v-for="item in list"
    :key="item.id"
    @mousedown="choseKeyCode(item.keyCode)"
    :class="{'active': keyCode === item.keyCode}"
    >{{item.keyTrigger}}</p>
  </section>
</template>

<script>
export default {
  props: ['list', 'keyCode'],
  methods: {
    choseKeyCode (code) {
      this.$emit('choseKeyCode', code)
    }
  },
  mounted () {
    document.addEventListener('keydown', (e) => this.choseKeyCode(e.keyCode))
  }
}
</script>

<style lang='scss' scoped>
section{
  width: 660px;
  height: 580px;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 25px;
  justify-content: space-between;
  align-content: space-between;
  transform: perspective();
  p{
    width: 30%;
    height: 30%;
    user-select: none;
    background-color: #fff;
    border-radius: 25px;
    background: linear-gradient(to top,#fff,rgb(150,150,150));
    border: 2px solid black;
    box-shadow: 3px 3px 5px 3px black;
    text-align: center;
    font: normal 900 45px/168px "楷体";
    text-shadow: 3px 3px 5px rgba(0,0,0,.3);
    &:hover{
      background:#fff;
      cursor: pointer;
    }
  }
  .active{
    background: orange!important;
    border: 5px solid black;
    box-shadow: none;
    text-shadow: none;
  }
}
</style>
